<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <icon-select @selected="selectedIcon" mode="default"></icon-select>
     <el-popover
    placement="right"
    trigger="click">
     <amap-drag @drag="dragMap" class="mapbox"></amap-drag>
    <el-button slot="reference">click 激活</el-button>
  </el-popover>
  </div>
</template>
<script>
import AmapDrag from '../components/AmapDrag'
import IconSelect from '../components/IconSelect'
export default {
  name: 'home',
  data(){
    return {
      menu_icon:null,
      popoverVisible:false,
    }
  },
  mounted() {
        
  },
  created () {
    let ws = new WebSocket("ws://118.190.53.244:7272");
        ws.onopen = function() {
          console.log("连接成功");
            let message = {
              "mode":"login",
              "data":"aaa"

            }
            
            ws.send(JSON.stringify(message));
            console.log("给服务端发送一个字符串：test");
        };
        ws.onmessage = function(e) {
            app.time=e.data
            console.log("收到服务端的消息：" + e.data);
        };
  },
  components: {
    AmapDrag,IconSelect
  },
  methods:{
    selectedIcon:function(icon){
      this.menu_icon = icon;
      console.log(icon)
    },
    initMap () {
    // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
    let AMapUI = this.AMapUI = window.AMapUI
    let AMap = this.AMap = window.AMap
    AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
      let mapConfig = {
        zoom: 16,
        cityName: MapCityName
      }
      if (this.lat && this.lng) {
        mapConfig.center = [this.lng, this.lat]
      }
      let map = new AMap.Map('js-container', mapConfig)
      // 加载地图搜索插件
      AMap.service('AMap.PlaceSearch', () => {
        this.placeSearch = new AMap.PlaceSearch({
          pageSize: 5,
          pageIndex: 1,
          citylimit: true,
          city: MapCityName,
          map: map,
          panel: 'js-result'
        })
      })
      // 启用工具条
      AMap.plugin(['AMap.ToolBar'], function () {
        map.addControl(new AMap.ToolBar({
          position: 'RB'
        }))
      })
      // 创建地图拖拽
      let positionPicker = new PositionPicker({
        mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
        map: map // 依赖地图对象
      })
      // 拖拽完成发送自定义 drag 事件
      positionPicker.on('success', positionResult => {
          // 过滤掉初始化地图后的第一次默认拖放
          if (!this.dragStatus) {
            this.dragStatus = true
          } else {
            this.$emit('drag', positionResult)
          }
        })
        // 启动拖放
        positionPicker.start()
      })
    },
     dragMap (data) {
       console.log(data);
      this.dragData = {
        lng: data.position.lng,
        lat: data.position.lat,
        address: data.address,
        nearestJunction: data.nearestJunction,
        nearestRoad: data.nearestRoad,
        nearestPOI: data.nearestPOI
      }
    }
    
  }
}
</script>
<style lang="less">

</style>
